<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%-- <%@include file="../../common/taglib.jsp"%> --%>

<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title"></h3>
			</div>
			<!-- /.box-header -->
			<div class="box-body">
				<div class="clearfix form-group" >
					<!-- <div class="form-group col-md-3">
						<label for="exampleInputFile">选择文件上传</label>
						<div id="uploader" class="wu-example">
							用来存放文件信息
							<div id="thelist" class="uploader-list"></div>
							<div class="btns clearfix">
								<div id="picker" style="display: inline-block;">选择文件</div>
								<button id="ctlBtn" type="button" style="height: 40px; vertical-align: top;" class="btn btn-default ">开始上传</button>
							</div>
						</div>
					</div> -->
					<div class="form-group col-md-1">
						<button id="addApplyBtn" type="button" style="height: 40px; vertical-align: top;" class="btn btn-info ">添加申请</button>
					</div>
					<div class="col-md-3">
						<div class="input-group date ">
							<div class="input-group-addon">
								<i class="fa fa-calendar"></i>
							</div>
							<input type="text" class="form-control pull-right" id="beginDateRemit" placeholder="开始时间..."> <input type="text" class="form-control pull-right" id="endDateRemit" placeholder="结束时间...">
						</div>
					</div>
					<div class="col-md-3">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-search"></i></span> <input type="text" class="form-control" id="outTradeNoRemit" placeholder="商户订单号..."> <select class="form-control" id="statusRemit">
								<option value="">选择状态</option>
								<option value="WAIT_CONFIRM">等待申请</option>
								<option value="CONFIRMED">已申请</option>
							</select>
						</div>
					</div>
					<div class="col-md-3">
						<button type="submit" id="searchRemit" class="btn btn-primary">搜索</button>
					</div>
				</div>
				<table id="pageTableRemit" class="table table-bordered table-hover">

					<thead>
						<tr>
							<th>商户订单号</th>
							<th>结算金额</th>
							<th>银行名称</th>
							<th>开户名</th>
							<th>开户账户</th>
							<th>身份证</th>
							<th>状态</th>
							<th>创建时间</th>
							<th style="width: 5%">操作</th>
						</tr>
					</thead>
					<tbody>
					</tbody>

				</table>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>
<!-- DataTables -->
<div class="modal" id="input_pass">
	<input type="hidden" name="id" id="id">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="inputPass('')">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">输入支付密码</h4>
			</div>
			<form class="form-horizontal">
				<div class="modal-body">

					<div class="form-group">
						<label for="inputName" class="col-sm-2 control-label">支付密码</label>

						<div class="col-sm-10">
							<input type="password" class="form-control" id="payPass" name="payPass" value="" />
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default pull-left" data-dismiss="modal" onclick="inputPass('')">关 闭</button>
					<button type="button" class="btn btn-primary" onclick="apply()">支付</button>
				</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<%@include file="./add.jsp" %>

<script src="${baseURL }/lte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${baseURL }/lte/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- page script -->
<script>

$('#addApplyBtn').on("click",function(){
	$("#addRemitApplyDialog").modal("show");
});



	function inputPass(id) {
		if ($('#input_pass').css('display') == 'block') {
			$("#payPass").val('');
			$("#input_pass").hide();
		} else {
			$("#input_pass").show();
			$("#id").val(id);
		}
	}

	function apply() {
		var payPass = $("#payPass").val();
		var id = $("#id").val();
		if (payPass != null && $.trim(payPass) != "") {
			$.ajax({
				type : "POST",
				data : {
					"payPass" : payPass,
					"id" : id
				},
				dataType : 'json',
				url : "${baseURL }/merchant/remitApply/apply",
				//请求成功完成后要执行的方法  
				success : function(result) {
					debugger;
					searchRemit();
					if(result.code == 0){
						$("#input_pass").hide();
						//remitApply(id);
						alertMsg("打款成功","success");
					}else{
						alertMsg(result.msg,"danger");
					}
				},
				error : function() {
					alertMsg(result.msg,"danger");
				}
			});
		} else {
			alertMsg("请输入支付密码","danger");
		}
	}

	$("#searchRemit").on("click", function() {
		searchRemit();
	});

	//初始化时间选择器
	$('#beginDateRemit').datepicker({
		autoclose : true,
		defaultDate : '-1M',
		beforeShowDay : $.noop,
		calendarWeeks : false,
		clearBtn : false,
		daysOfWeekDisabled : [],
		endDate : Infinity,
		forceParse : true,
		format : 'yyyy-mm-dd',
		keyboardNavigation : true,
		language : 'cn',
		minViewMode : 0,
		multidate : false,
		multidateSeparator : ',',
		orientation : "auto",
		rtl : false,
		startDate : -Infinity,
		startView : 0,
		todayBtn : false,
		todayHighlight : false,
		weekStart : 0
	});

	$('#endDateRemit').datepicker({
		autoclose : true,
		defaultDate : '-1M',
		beforeShowDay : $.noop,
		calendarWeeks : false,
		clearBtn : false,
		daysOfWeekDisabled : [],
		endDate : Infinity,
		forceParse : true,
		format : 'yyyy-mm-dd',
		keyboardNavigation : true,
		language : 'cn',
		minViewMode : 0,
		multidate : false,
		multidateSeparator : ',',
		orientation : "auto",
		rtl : false,
		startDate : -Infinity,
		startView : 0,
		todayBtn : false,
		todayHighlight : false,
		weekStart : 0
	});

	function retrieveData(sSource, aoData, fnCallback) {
		aoData.push({
			"name" : "beginDate",
			"value" : $("#beginDateRemit").val()
		}, {
			"name" : "endDate",
			"value" : $("#endDateRemit").val()
		}, {
			"name" : "outTradeNo",
			"value" : $("#outTradeNoRemit").val()
		}, {
			"name" : "status",
			"value" : $("#statusRemit").val()
		});
		$.ajax({
			"type" : "POST",
			"contentType" : "application/json",
			"url" : sSource,
			"dataType" : "json",
			"data" : JSON.stringify(aoData), //以json格式传递     
			"success" : function(resp) {
				fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式    
			}
		});
	}

	var oTableRemit = null;

	$(function() {
		searchRemit();
	});

	//“检索”按钮的处理函数     
	function searchRemit() {
		if (oTableRemit == null) { //仅第一次检索时初始化Datatable     
			$("#pageTableRemit").show();
			oTableRemit = $('#pageTableRemit')
					.dataTable(
							{
								"bAutoWidth" : false, //不自动计算列宽度     

								"columns" : [ {
									"data" : "outTradeNo"
								}, {
									"data" : "settAmount"
								}, {
									"data" : "bankName"
								}, {
									"data" : "bankAccountName"
								}, {
									"data" : "bankAccountNo"
								}, {
									"data" : "cardNo"
								}, {
									"data" : "statusDesc"
								}, {
									"data" : "createTimeDesc"
								}, {
									"data" : null
								} ],

								"bProcessing" : true, //加载数据时显示正在加载信息     
								"bServerSide" : true, //指定从服务器端获取数据     
								"bFilter" : false, //不使用过滤功能     
								"bLengthChange" : false, //用户不可改变每页显示数量     
								"iDisplayLength" : 10, //每页显示10条数据     
								"sAjaxSource" : "${baseURL }/merchant/remitApply/ajaxRemitApplyList",//获取数据的url     
								"fnServerData" : retrieveData, //获取数据的处理函数     
								"sPaginationType" : "full", //翻页界面类型     
								"searching" : false,
								"ordering" : false,
								"oLanguage" : { //汉化     
									"sZeroRecords" : "没有检索到数据",
									"sInfo" : "总共有 _TOTAL_ 条记录",
									"sInfoEmtpy" : "没有数据",
									"sProcessing" : "正在加载数据...",
									"oPaginate" : {
										"sFirst" : "首页",
										"sPrevious" : "前一页",
										"sNext" : "后一页",
										"sLast" : "尾页"
									}
								},
								"columnDefs" : [ {
									"targets" : -1,
									"data" : null,
									"render" : function(data) {
										if (data.status == 'WAIT_CONFIRM') {
											return '<a class="btn btn-xs btn-default btn-del"  onclick="inputPass(\''
													+ data.id + '\')">申请打款</a>'
										} else {
											return "";
										}
									}
								} ]
							});
		}

		//刷新Datatable，会自动激发retrieveData     
		oTableRemit.fnDraw();
	}

	remitApply = function(id) {
		$.ajax({
			type : "POST",
			data : {
				id : id
			},
			dataType : "json",
			url : "${baseURL }/merchant/remitApply/apply",
			//请求成功完成后要执行的方法  
			success : function(result) {
				searchRemit();
				if (result.code == 0) {
					alertMsg("打款成功");
				} else {
					alertMsg(result.msg, "danger");
				}

			},
			error : function() {
				alertMsg("系统异常！", "danger");
			}
		});
	}

	//文件上传
	jQuery(function() {
		var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uploader;

		uploader = WebUploader.create({

			// 不压缩image
			resize : false,

			// swf文件路径
			swf : '${baseURL }/lte/plugins/webuploader/Uploader.swf',

			// 文件接收服务端。
			server : '${baseURL }/merchant/remitApply/importExcel',

			// 选择文件的按钮。可选。
			// 内部根据当前运行是创建，可能是input元素，也可能是flash.
			pick : '#picker',

			method : 'POST',
			
			accept: {
	            title: 'excel',
	            extensions: 'xls,xlsx',
	            mimeTypes: 'application/xls,application/xlsx'
	        }
		});

		// 当有文件添加进来的时候
		uploader.on('fileQueued', function(file) {
			$("p[class='state']").remove();
			$("h4[class='info']").remove();
			$list.append('<div id="' + file.id + '" class="item">'
					+ '<h4 class="info">' + file.name + '</h4>'
					+ '<p class="state">等待上传...</p>' + '</div>');
		});

		// 文件上传过程中创建进度条实时显示。
		uploader
				.on(
						'uploadProgress',
						function(file, percentage) {
							var $li = $('#' + file.id), $percent = $li
									.find('.progress .progress-bar');

							// 避免重复创建
							if (!$percent.length) {
								$percent = $(
										'<div class="progress progress-striped active">'
												+ '<div class="progress-bar" role="progressbar" style="width: 0%">'
												+ '</div>' + '</div>')
										.appendTo($li).find('.progress-bar');
							}

							$li.find('p.state').text('上传中');

							$percent.css('width', percentage * 100 + '%');
						});

		uploader.on("uploadAccept", function(file, data) {
			if (data.code != "0") {
				// 通过return false来告诉组件，此文件上传有错。
				return false;
			}
		});

		uploader.on('uploadSuccess', function(file) {
			$('#' + file.id).find('p.state').text('已上传');
		});

		uploader.on('uploadError', function(file) {
			$('#' + file.id).find('p.state').text('数据有误，上传失败(请上传excel文件)');
		});

		uploader.on('uploadComplete', function(file) {
			$('#' + file.id).find('.progress').fadeOut();
		});

		uploader.on('all', function(type) {
			if (type === 'startUpload') {
				state = 'uploading';
			} else if (type === 'stopUpload') {
				state = 'paused';
			} else if (type === 'uploadFinished') {
				state = 'done';
			}

			if (state === 'uploading') {
				$btn.text('暂停上传');
			} else {
				$btn.text('开始上传');
			}
		});

		$btn.on('click', function() {
			if (state === 'uploading') {
				uploader.stop();
			} else {
				uploader.upload();
			}
		});
	});
</script>